$boxPadding: 24px;
$boxBorderRadius: 5px;

.overviewWrapper {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 102px;
    margin-bottom: 24px;
    max-height: 1158px;

    > div {
        background: #fff;
        padding: $boxPadding;
        border-radius: $boxBorderRadius;
        box-sizing: border-box;
    }

    .left {
        margin-right: 18px;
    }

    .duration,
    .trialCount {
        grid-column: 1 / 2;
        background: #fff;
        border-radius: $boxBorderRadius;
        box-sizing: border-box;
    }

    .duration {
        grid-row: 6 / 10;
        position: relative;
        top: -56px;
    }

    .trialCount {
        grid-row: 10 / 13;
        max-height: 283px;
        margin-top: -38px;
    }
}

.overviewBasicInfo {
    grid-column: 1 / 2;
    grid-row: 1 / 6;
    z-index: 2;
    max-height: 436px;
}

.bestTable {
    grid-column: 2 / 8;
    grid-row: 7 / 13;
    margin-top: 18px;
    max-height: 532px;
}

.overviewBestMetric {
    grid-column: 2 / 8;
    grid-row: 1 / 7;
    overflow: hidden;

    button {
        border: 1px solid #e5e7eb;
        border-radius: 6px;
    }

    .active {
        color: #fff;
        background: #4076c4;
        border: 1px solid #4076c4;
    }

    .max {
        margin-left: 7px;
    }

    .chooseEntry {
        line-height: 30px;
    }
}

.overviewChart {
    margin-top: 20px;
}
